<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 订单列表 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
    <div class="ws-order">
        <div id="tab" class="tab">
            <ul>
              <li class="bui-tab-panel-item active"><a href="#">待发货</a></li>
              <li class="bui-tab-panel-item"><a href="#">已发货</a></li>
              <li class="bui-tab-panel-item"><a href="#">待支付</a></li>
              <li class="bui-tab-panel-item"><a href="#">已支付到担保方</a></li>
              <li class="bui-tab-panel-item"><a href="#">已支付</a></li>
              <li class="bui-tab-panel-item"><a href="#">货到付款</a></li>
              <li class="bui-tab-panel-item"><a href="#">活动</a></li>
              <li class="bui-tab-panel-item"><a href="#">已作废</a></li>
              <li class="bui-tab-panel-item"><a href="#">已完成</a></li>
              <li class="bui-tab-panel-item"><a href="#">全部</a></li>
              <li class="bui-tab-panel-item"><a href="#">预售订单</a></li>
            </ul>
          </div>
          <div class="ws-order-controls">
              <span class="ws-orderbtn">添加订单</span>
              <span class="ws-orderbtn">打印样式</span>
              <span class="ws-orderbtn">打印选定订单</span>
              <div class="ws-orderbtn ext-xiala">
                  标签<span></span>
                  <ul class="ws-orderbtn-list">
                      <li class="ws-orderbtn-item">1</li>
                      <li class="ws-orderbtn-item">1</li>
                      <li class="ws-orderbtn-item">1</li>
                  </ul>
              </div>
              <span class="ws-orderbtn">导出</span>
              <div class="ws-order-serch">
                  <div class="ws-orderbtn ext-xiala">
                      订单号<span></span>
                      <ul class="ws-orderbtn-list">
                          <li class="ws-orderbtn-item">订单号</li>
                          <li class="ws-orderbtn-item">收货人</li>
                          <li class="ws-orderbtn-item">收货地址</li>
                      </ul>
                  </div>
                  <input class="search-input" type="text" name="name" value="" placeholder="数额乳后直接回车确认">
                  <div class="search-ico"></div>
              </div>
          </div>
        <div class="row">
            <ul id="panel">
                <li>1</li>
                <li>
                    <div class="ws-orderfh">
                        <div id="fh-tab" class="tab">
                            <ul>
                                <li class="bui-tab-panel-item active"><a href="#">基本信息</a></li>
                                <li class="bui-tab-panel-item"><a href="#">商品</a></li>
                                <li class="bui-tab-panel-item"><a href="#">收退款记录</a></li>
                                <li class="bui-tab-panel-item"><a href="#">收发货记录</a></li>
                                <li class="bui-tab-panel-item"><a href="#">优惠方案</a></li>
                                <li class="bui-tab-panel-item"><a href="#">订单备注</a></li>
                                <li class="bui-tab-panel-item"><a href="#">订单日志</a></li>
                                <li class="bui-tab-panel-item"><a href="#">顾客留言</a></li>
                            </ul>
                        </div>
                        <div class="row">
                            <ul id="fh-panel">
                                <li>
                                    <div class="ws-fh-controls">
                                        <span style="float:left;">( 订 )单操作：</span>
                                        <span class="ws-orderbtn ext-noAllow">支付</span>
                                        <span class="ws-orderbtn">发货</span>
                                        <span class="ws-orderbtn">完成</span>
                                        <span style="float:left;">( 退 )单操作：</span>
                                        <span class="ws-orderbtn">退款</span>
                                        <span class="ws-orderbtn">退货</span>
                                        <span class="ws-orderbtn">作废</span>
                                        <span class="ws-orderbtn">删除</span>
                                    </div>
                                    <div class="ws-ordersubmain">
                                        <table class="ws-table" border=1>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        赠品名称与购买量
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        测试积分兑换赠品<span class="color-org">x1</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="ws-ordersublist">
                                            <table class="ws-table ext-ordersub" border=0 cellpadding=0 cellspacing=0>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <h5 align="center" class="ws-table__h5">商品价格</h5>
                                                            <ul>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                        <td>
                                                            <h5 align="center" class="ws-table__h5">订单其他信息</h5>
                                                            <ul>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                        <td>
                                                            <h5 align="center" class="ws-table__h5">购买人信息</h5>
                                                            <ul>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                        <td>
                                                            <h5 align="center" class="ws-table__h5">收货人信息<span class="ws-orderbtn" style="float:none;line-height: 18px;margin-left: 5px;">复制收货人信息</span></h5>
                                                            <ul>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                                <li>
                                                                    <span class="ws-table__subth">
                                                                        商品总额：
                                                                    </span>
                                                                    <span class="ws-table__subtd">
                                                                        ￥168.0
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="ws-ordersublist">
                                            <h3>商品信息</h3>
                                            <table class="ws-table" border=1>
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            货品编号
                                                        </th>
                                                        <th>
                                                            货品名称
                                                        </th>
                                                        <th>
                                                            已发货量
                                                        </th>
                                                        <th>
                                                            单价
                                                        </th>
                                                        <th>
                                                            合计金额
                                                        </th>
                                                        <th>
                                                            购买数量
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            P4C85B2B5BAEE9
                                                        </td>
                                                        <td>
                                                            <a href="#" style="color:#3367ac">TATA多色漆皮平跟小雨靴(颜色：浅蓝色、尺码：35) </a>
                                                        </td>
                                                        <td>
                                                            1
                                                        </td>
                                                        <td>
                                                            ￥168.0
                                                        </td>
                                                        <td>
                                                            ￥168.0
                                                        </td>
                                                        <td>
                                                            1
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="6" style="border:none;padding:0">
                                                            <div style=" border-bottom:1px solid #ddd;font-weight:bold;background:#F4F4F4;  padding-left:50px; text-align:left">优惠赠品</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            P4C85B2B5BAEE9
                                                        </td>
                                                        <td>
                                                            <a href="#" style="color:#3367ac">TATA多色漆皮平跟小雨靴(颜色：浅蓝色、尺码：35) </a>
                                                        </td>
                                                        <td>
                                                            1
                                                        </td>
                                                        <td>
                                                            ￥168.0
                                                        </td>
                                                        <td>
                                                            ￥168.0
                                                        </td>
                                                        <td>
                                                            1
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="ws-ordersublist">
                                            <p class="ws-txt">会员备注：</p>
                                            <p class="ws-txt">订单备注</p>
                                            <p class="ws-txt">订单附言：</p>
                                        </div>
                                    </div>
                                    <div class="ws-ordersubhover">
                                        <span>处理订单<b></b></span>
                                        <ul>
                                            <li>11</li>
                                            <li>22</li>
                                        </ul>
                                    </div>
                                </li>
                                <li>1111</li>
                                <li>1111</li>
                                <li>1111</li>
                                <li>1111</li>
                                <li>1111</li>
                                <li>1111</li>
                                <li>1111</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
    BUI.use(['bui/tab','bui/mask'],function(Tab){

        var tab = new Tab.TabPanel({
          srcNode : '#tab',
          elCls : 'nav-tabs',
          itemStatusCls : {
            'selected' : 'active'
          },
          panelContainer : '#panel'//如果不指定容器的父元素，会自动生成
          //selectedEvent : 'mouseenter',//默认为click,可以更改事件

        });

        tab.render();
  });

  BUI.use(['bui/tab','bui/mask'],function(Tab){

      var tab = new Tab.TabPanel({
        srcNode : '#fh-tab',
        elCls : 'nav-tabs',
        itemStatusCls : {
          'selected' : 'active'
        },
        panelContainer : '#fh-panel'//如果不指定容器的父元素，会自动生成
        //selectedEvent : 'mouseenter',//默认为click,可以更改事件

      });

      tab.render();
});

    $(function() {
        $('.ws-orderfh').css('height',$(window).height() - 75 +'px');
        $(window).on('resize', function() {
            $('.ws-orderfh').css('height',$(window).height() - 75 +'px');
        })
    })
    </script>
</body>

</html>
